<template>
  <view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
    <view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
      <slot name="full"></slot>
      <view class="action" @tap="BackPage" v-if="isBack">
        <text class="cuIcon-back"></text>
        <slot name="backText"></slot>
      </view>
      <view class="content" :style="[{top:StatusBar + 'px'}]">
        <slot name="content"></slot>
      </view>
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">


import {computed, defineProps, ref} from "vue";
import {onReady} from "@dcloudio/uni-app";

const CustomBar = ref(60)
const StatusBar = ref(undefined)

const style = computed({
  get() {
    let style = `height:${CustomBar.value}px;padding-top:${StatusBar.value}px;`;
    if (props.bgImage) {
      style = `${style}background-image:url(${props.bgImage});`;
    }
    return style
  },
  set() {

  }
})

onReady(() => {

  let menuButtonInfo = uni.getMenuButtonBoundingClientRect() //px
  let statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']
  StatusBar.value = statusBarHeight
  CustomBar.value = menuButtonInfo.bottom + uni.upx2px(10)

})

const props = defineProps({
  bgColor: {
    type: String,
    default: '',
  },
  isBack: {
    type: [Boolean, String],
    default: false
  },
  bgImage: {
    type: String,
    default: ''
  },
})

const BackPage = () => {
  uni.navigateBack({
    delta: 1
  })
}


</script>

<style scoped>

</style>